<template>
  <div class="q-pa-md">
    <t-layout
      view="lhh LpR lff"
      container
      style="height: 300px"
      class="shadow-2 rounded-borders"
    >
      <t-header reveal class="bg-black">
        <t-toolbar>
          <t-btn flat round dense icon="menu" />
          <t-toolbar-title>Header</t-toolbar-title>
        </t-toolbar>
      </t-header>

      <t-page-container>
        <t-page padding>
          <p v-for="n in 15" :key="n">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil
            praesentium molestias a adipisci, dolore vitae odit, quidem
            consequatur optio voluptates asperiores pariatur eos numquam rerum
            delectus commodi perferendis voluptate?
          </p>

          <t-page-sticky position="bottom-right" :offset="[18, 18]">
            <t-fab icon="add" direction="up" color="accent">
              <t-fab-action
                @click="onClick"
                color="primary"
                icon="person_add"
              />
              <t-fab-action @click="onClick" color="primary" icon="mail" />
            </t-fab>
          </t-page-sticky>
        </t-page>
      </t-page-container>
    </t-layout>
  </div>
</template>

<script>
  export default {
    setup() {
      return {
        onClick() {
          // console.log('Clicked on a fab action')
        },
      };
    },
  };
</script>
